<template>
  <div class="admin-layout">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="header-left">
        <img src="@/assets/logo.png" class="logo" style="background-color: white"/>
        <span class="title">后台管理系统</span>
      </div>
      <div class="header-right">
        <img src="@/assets/img.png" class="logo" />
        <span class="username">{{ adminUsername }}</span>
        <el-button type="primary" size="small" @click="logout" class="logout-btn">退出</el-button>
      </div>
    </el-header>

    <el-container class="container">
      <!-- 侧边栏菜单 -->
      <el-aside width="220px" class="aside">
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical-demo"
            background-color="#fff"
            text-color="#333"
            active-text-color="#409EFF"
            router
        >
          <el-submenu index="1">
            <template #title>
              <i class="el-icon-menu"></i>
              <span>分类管理</span>
            </template>
            <el-menu-item index="/admin/home/category/list" @click="refreshCategoryList">
              <i class="el-icon-s-operation"></i>分类列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template #title>
              <i class="el-icon-goods"></i>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/admin/home/product/list" @click="refreshProductList">
              <i class="el-icon-s-goods"></i>商品列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>订单管理</span>
            </template>
            <el-menu-item index="/admin/home/order/list" @click="refreshOrderList">
              <i class="el-icon-s-order"></i>订单列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>活动管理</span>
            </template>
            <el-menu-item index="/admin/home/activity/list" @click="refreshActivityList">
              <i class="el-icon-s-order"></i>活动列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/home/user/list" @click="refreshUserList">
              <i class="el-icon-s-order"></i>用户列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>自提点管理</span>
            </template>
            <el-menu-item index="/admin/home/address/list" @click="refreshAddressList">
              <i class="el-icon-s-order"></i>自提点列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>日志</span>
            </template>
            <el-menu-item index="/admin/home/日志/list" @click="refreshLogisticsList">
              <i class="el-icon-s-order"></i>日志列表
            </el-menu-item>
          </el-submenu>
          <el-submenu index="6">
            <template #title>
              <i class="el-icon-s-order"></i>
              <span>优惠券管理</span>
            </template>
            <el-menu-item index="/admin/home/coupon/list" @click="refreshCouponList">
              <i class="el-icon-s-order"></i>优惠券列表
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 主内容区 -->
      <el-main class="main">
        <div class="main-card">
          <router-view :key="routeKey"></router-view>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage } from "element-plus";

const router = useRouter();
const route = useRoute();
const adminUsername = ref('');
const routeKey = ref(0);
const refreshProductList = () => {
  routeKey.value += 1;
};
const refreshCategoryList = () => {
  routeKey.value += 1;
};
const refreshOrderList = () => {
  routeKey.value += 1;
};
const refreshActivityList = () => {
  routeKey.value += 1;
};
const refreshUserList = () => {
  routeKey.value += 1;
};
const refreshAddressList = () => {
  routeKey.value += 1;
};
const refreshLogisticsList = () => {
  routeKey.value += 1;
};
const refreshCouponList = () => {
  routeKey.value += 1;
};
onMounted(() => {
  adminUsername.value = sessionStorage.getItem("adminUsername");
  if (route.path !== '/admin/home/product/list') {
    router.push('/admin/home/product/list');
  }
});

const logout = () => {
  sessionStorage.removeItem("adminToken");
  sessionStorage.removeItem("adminUsername");
  ElMessage.success("已安全退出");
  router.push('/admin/login');
};
</script>

<style scoped>
.admin-layout {
  min-height: 100vh;
  background: linear-gradient(135deg, #e0e7ff 0%, #f8fafc 100%);
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
  background: #409EFF;
  color: #fff;
  box-shadow: 0 2px 8px #f0f1f2;
  padding: 0 32px;
}
.header-left {
  display: flex;
  align-items: center;
}
.logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  margin-right: 16px;
  border: 2px solid #fff;
}
.title {
  font-size: 22px;
  font-weight: bold;
  letter-spacing: 2px;
}
.header-right {
  display: flex;
  align-items: center;
}
.avatar {
  background: #fff;
  color: #409EFF;
  margin-right: 8px;
}
.username {
  margin-right: 16px;
  font-size: 16px;
}
.logout-btn {
  margin-left: 8px;
}
.container {
  min-height: calc(100vh - 64px);
}
.aside {
  background: #fff;
  box-shadow: 2px 0 8px #f0f1f2;
  padding-top: 24px;
}
.el-menu-vertical-demo {
  border-right: none;
}
.main {
  background: #f8fafc;
  padding: 32px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.main-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(64,158,255,0.08);
  padding: 32px;
  width: 100%;
  min-height: 600px;
}
</style>